<template>
  <div style="width: 100%;height: 100vh;background-color: #2c3e50;overflow: hidden">
    <div style="width: 400px;margin: 150px auto">
      <div style="color: #cccccc;font-size: 30px;text-align: center;padding: 30px">欢迎登录</div>
      <span v-if="isActive">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input prefix-icon="UserFilled" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="Key" v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <div style="margin: 0 auto;width: 100%">
            <el-button style="width: 30%;margin-left: 1.5%" type="primary" @click="login">登录</el-button>
            <el-button style="width: 30%" type="default" @click="isActive=!isActive">手机号码登录</el-button>
            <el-button style="width: 30%" type="success" @click="$router.push('/register')">注册</el-button>
          </div>
        </el-form-item>
      </el-form>
      </span>
      <span v-else>
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input prefix-icon="UserFilled" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="Key" v-model="testify" style="width: 74%"></el-input>
          <el-button>获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <div style="margin: 0 auto;width: 100%">
            <el-button style="width: 30%;margin-left: 1.5%" type="primary" @click="login">登录</el-button>
            <el-button style="width: 30%" type="default" @click="isActive=!isActive">账号密码登录</el-button>
            <el-button style="width: 30%" type="success" @click="$router.push('/register')">注册</el-button>
          </div>
        </el-form-item>
      </el-form>
      </span>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",
  components: {},
  data() {
    return {
      form: {},
      isActive:true,
      testify:"",
    }
  },
  created() {
    if (sessionStorage.getItem("administrator")) {
      this.$router.push("/home")
    }
  },
  methods: {
    login() {
      request.post("/login/check", this.form).then(res => {
        console.log(res)
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "登录成功"
          })
          sessionStorage.setItem("administrator", JSON.stringify(res.data))
          this.$router.push("/home")
        } else if (res.code === '401') {
          this.$message({
            type: "error",
            message: res.msg
          })
        } else if (res.code === '402') {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>